import { Picker, Switch, View } from "@tarojs/components";
import { useBoolean } from "ahooks";

import PopupPost from "./PopupPost";
import ByTag from "@/components/ui/ByTag";
import ByText from "@/components/ui/ByText";
import ByIcon from "@/components/ui/ByIcon";
import ByCell from "@/components/ui/ByCell";
import BySpace from "@/components/ui/BySpace";
import ByCellGroup from "@/components/ui/ByCellGroup";

import { ConstructionPlanItem } from "@/types/construction";

const labelWidth = "160rpx";

export default ({
  source,
  endDate,
  startDate,

  disabled,
  workTypeList,

  onChange,
  onDelete,
}: {
  disabled?: boolean;
  // 时间选择器最大选择时间
  endDate?: string;
  // 时间选择器最小选择时间
  startDate?: string;
  isSkipHoliday: boolean;
  holidayUnixList: number[];
  source: ConstructionPlanItem;
  workTypeList: any[];

  onChange: (model: Partial<ConstructionPlanItem>) => void;
  onDelete: () => void;
}) => {
  const [visiblePostPopup, handlePostPopup] = useBoolean(false);

  // 选择工种确认
  const handleConfirmPost = (ids, names) => {
    handlePostPopup.setFalse();
    setSource({ executePostIds: ids, executePostNames: names });
  };

  const dateChange = (value: string) => {
    setSource({ planStartDate: value });
  };

  const setSource = (obj) => {
    onChange({ ...source, ...obj });
  };

  const executePostNames = source.executePostNames?.split(",");
  // 工种索引
  const workTypeIndex =
    workTypeList?.findIndex?.((e) => e.name == source.workerType) || 0;

  return (
    <>
      <ByCellGroup
        className="mb-6"
        title={source.constructionProjectName}
        slotRight={
          !disabled && (
            <BySpace>
              {/* <ByButton {...buttonProps}>新增</ByButton> */}
              {/* <ByButton {...buttonProps}>编辑</ByButton> */}

              <ByText type="error" onClick={onDelete}>
                <ByIcon name="Remove" />
              </ByText>
            </BySpace>
          )
        }
      >
        <Picker
          mode="date"
          start={startDate}
          end={endDate}
          value={source.planStartDate || ""}
          onChange={(e) => dateChange(e.detail.value)}
        >
          <ByCell
            border
            label="开工"
            labelWidth={labelWidth}
            nextIcon={<ByIcon name="Calendar" size={42} />}
          >
            {source.planStartDate}
          </ByCell>
        </Picker>

        <ByCell
          next
          border
          label="完工"
          labelWidth={labelWidth}
          nextIcon={<ByIcon name="Calendar" size={42} />}
        >
          {source.planFinishDate}
        </ByCell>

        {/* 水电工、泥工、木工、油漆 */}
        {source.materialPlanTemplate && (
          <ByCell border>
            <ByCellGroup className="mt-2 w-full">
              <ByCell
                labelWidth={labelWidth}
                label={source.materialPlanTemplate.remaindTemplateName}
              >
                {source.planStartDate}
              </ByCell>
              <View className="mt-1 pb-3 text-warning text-sm">
                {source.materialPlanTemplate.planContent}
              </View>
            </ByCellGroup>
          </ByCell>
        )}

        <View className="flex">
          <Picker
            rangeKey="name"
            className="flex-1"
            range={workTypeList}
            value={workTypeIndex}
            onChange={(e) =>
              setSource({
                workType: workTypeList[e.detail.value]["name"],
                workerType: workTypeList[e.detail.value]["name"],
              })
            }
          >
            <ByCell
              border
              label="施工工种"
              labelWidth={labelWidth}
              nextIcon={<ByIcon name="ArrowBottom" />}
            >
              {source.workerType || source.workType}
            </ByCell>
          </Picker>

          <View className="flex-1 flex-center  text-right">
            <ByText size="sm" type="second">
              必做
            </ByText>
          </View>
        </View>

        <View className="flex">
          <ByCell border label="内验" labelWidth={labelWidth}>
            <Switch
              disabled={disabled}
              checked={source.internalTest}
              onChange={(e) => setSource({ internalTest: e.detail.value })}
            />
          </ByCell>

          <ByCell border label="计入工期" className="pl-4" align="right">
            <Switch
              disabled={disabled}
              checked={!source.notIncludedPeriod}
              onChange={(e) =>
                setSource({ notIncludedPeriod: !e.detail.value })
              }
            />
          </ByCell>
        </View>

        <ByCell
          next
          border
          align="right"
          label="执行岗位"
          labelWidth={labelWidth}
          onClick={() => !disabled && handlePostPopup.setTrue()}
        >
          <BySpace gap={6} className="justify-end">
            {executePostNames?.map((item, index) => (
              <ByTag size="small" variant="outline" rounded={false} key={index}>
                {item}
              </ByTag>
            ))}
          </BySpace>
        </ByCell>

        <ByCell border label="开完工控制" labelWidth={labelWidth}>
          是
        </ByCell>
      </ByCellGroup>

      {visiblePostPopup && (
        <PopupPost
          title="执行岗位"
          tip="(多选)"
          ids={source.executePostIds}
          onCancel={handlePostPopup.setFalse}
          onConfirm={handleConfirmPost}
        />
      )}
    </>
  );
};
